<!DOCTYPE HTML>
<html>
  <head>
    <title>TreeGrid events and actions</title>

    <script type="text/javascript" src="../treegrid.js"></script>
    <link rel="stylesheet" type="text/css" href="../treegrid.css">
    
    <style>
      body {
        font-family: verdana, arial;
        font-size: 12pt;
      }
      td.main {
        vertical-align: top;
      }
      
      div.treegrid-frame {
        border-color: #BF29C8;
      }
      div.treegrid-header {
        color: white;
        background-color: #E157E9;
        border-color: #BF29C8;
      }
      div.treegrid-item:hover {
        background-color: rgba(255, 255, 128, 0.5);
      }
      div.treegrid-item-selected:hover {
      }

      img.icon {
        vertical-align: top;
      }      
    </style>

    <script type="text/javascript">
      var treegrid;
      var data;
      
      function createDepartment(index) {
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';        
        var personCount = Math.round(Math.random() * 20);
        var department = {
          'name': 'Department ' + chars.charAt(index),
          'employees': personCount,
          'sales': '$ ' + (10 + personCount * 10 * Math.round(7 * Math.random())) + '.000'
        };
        department.persons = createPersons(personCount);
        department._actions = [
          {'event': 'delete', 'title': 'Delete this department', 'image': 'img/24/Close-2-icon.png'}
          //{'event': 'delete', 'title': 'Delete this department'}
        ];
        return department;
      }
      
      function createDepartments(departmentCount) {
        var departments = [];
        for (var i = 0; i < departmentCount; i++) {
          var department = createDepartment(i);
          departments.push(department);
        }
        return new links.DataTable(departments);
      }      
      
      function createPerson(index) {
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var person = {
          'name': '<img src="img/24/Preppy-icon.png" class="icon"> Person '+ chars[index],
          'age': Math.round(20 + Math.random() * 40)
        };
        
        person._actions = [
          {'event': 'edit', 'image': 'img/24/Document-Write-icon.png'},
          {'event': 'ok', 'image': 'img/24/Ok-icon.png'},
          {'event': 'delete', 'image': 'img/24/Close-2-icon.png'}
          /*{'event': 'edit'},
          {'event': 'ok'},
          {'event': 'delete'}*/
        ];

        return person;
      }
      
      function createPersons(personCount) {
        var persons = [];
        for (var i = 0; i < personCount; i++) {
          var person = createPerson(i);
          persons.push(person);
        }
        return persons;
      }

      
      // Called when the page is loaded
      function drawTreeGrid() {
        var departmentCount = 20;
        data = createDepartments(departmentCount);
        
        // specify options
        var options = {
          'width': '500px',
          'height': '400px',
          'items': {
            'defaultHeight': 32   // px
          }
        };  

        // Instantiate our treegrid object.
        treegrid = new links.TreeGrid(document.getElementById('mytreegrid'), options);

        // register listeners for interesting events
        var info = document.getElementById('log');

        function getNameOfFirstItem(items) {
          var name;
          if (items && items.length) {
            name = items[0].name;
          }
          return name || '';
        }
        
        // bind the events to our functions
        links.events.addListener(treegrid, 'expand', function (properties) {
          log('event: expand, name: ' + getNameOfFirstItem(properties.items));
        });
        links.events.addListener(treegrid, 'collapse', function (properties) {
          log('event: collapse, name: ' + getNameOfFirstItem(properties.items));
        });
        links.events.addListener(treegrid, 'select', function (properties) {
          log('event: select, name: ' + getNameOfFirstItem(properties.items));
        });
        links.events.addListener(treegrid, 'enter', function (properties) {
          log('event: enter, name: ' + properties.item.name);
        });
        links.events.addListener(treegrid, 'leave', function (properties) {
          log('event: leave, name: ' + properties.item.name);
        });

        // The following three events are defined and fired via action buttons
        links.events.addListener(treegrid, 'edit', function (properties) {
          log('event: edit, name: ' + getNameOfFirstItem(properties.items));
          alert('so you would like to edit item ' + getNameOfFirstItem(properties.items) + '?');
        });
        links.events.addListener(treegrid, 'ok', function (properties) {
          log('event: ok, name: ' + getNameOfFirstItem(properties.items));
          alert('Is that person ok?');
        });
        links.events.addListener(treegrid, 'delete', function (properties) {
          log('event: delete, name: ' + getNameOfFirstItem(properties.items));
          alert('why?');
          /* TODO: implement a real deletion
          data.splice(properties.index, 1);
          //*/
        });

        var logs = [];
        function log(msg) {
          logs.push(msg);
          while(logs.length > 20) {
              logs.shift();
          }
          info.innerHTML = logs.join('<br>');
        }

        // Draw our treegrid with the created data and options 
        treegrid.draw(data);
      }

   </script>
  </head>

  <body onload="drawTreeGrid();">
    <h1>TreeGrid events and actions</h1>

    <table><tr><td class="main">
      <div id="mytreegrid"></div>
    </td><td class="main">
      <div id="log"></div>
    </td></tr></table>
    
  </body>
</html>
